Definition List (list style)

Add a description to a term in this styled Description list. Love us some semantic HTML

Rendered Component

CAP: Computing Accounts and Passwords; a team within the IT Service Center that specifically handles access requests and Brown username/password issues.
CIS: Computing & Information Services, our department’s former name; Help is on the way
CR: Change Request: A type of ticket that is requesting a change to an existing business system. A CR may involve a minor or more significant change.
DCC: Department Computing Coordinator; Cheese; bacon
DLD: Digital Learning & Design - part of the Sheridan Center for Teaching and Learning
EAS: Enterprise Applications and Software Engineering

Markup

HTML

<dl>
  <dt class="definition-list-term">CAP</dt>
  <dd class="definition-list-definition">
    Computing Accounts and Passwords; a team within the IT Service Center that
    specifically handles access requests and Brown username/password issues.
  </dd>
  <dt class="definition-list-term">CIS</dt>
  <dd class="definition-list-definition">
    Computing &amp; Information Services, our department’s former name
  </dd>
  <dd class="definition-list-definition">Help is on the way</dd>
  <dt class="definition-list-term">CR: Change Request</dt>
  <dd class="definition-list-definition">
    A type of ticket that is requesting a change to an existing business system.
    A CR may involve a minor or more significant change.
  </dd>
  <dt class="definition-list-term">DCC</dt>
  <dd class="definition-list-definition">Department Computing Coordinator</dd>
  <dd class="definition-list-definition">Cheese</dd>
  <dd class="definition-list-definition">bacon</dd>
  <dt class="definition-list-term">DLD</dt>
  <dd class="definition-list-definition">
    Digital Learning &amp; Design - part of the Sheridan Center for Teaching and
    Learning
  </dd>
  <dt class="definition-list-term">EAS</dt>
  <dd class="definition-list-definition">
    Enterprise Applications and Software Engineering
  </dd>
</dl>

Styling

CSS

.definition-list-term {
  font-weight: 700;
  margin: 1rem 0;
}
.definition-list-definition {
  margin-left: 1rem;
}
.definition-list-definition:before {
  content: "●" / "";
  color: #c00404;
  margin-right: 0.75rem;
}